<template>
    <div class="tech">
        <h1>产品支持</h1>
        <div class="tech_box">   
            <Holder v-for="(item,index) in pros" :key="index" :data="item"/>
        </div>
        <div style="textAlign:right;padding:1em 0">
            共{{amount}}件
        </div>
    </div>
</template>
<script>
import Holder from '../components/holder.vue'
export default{
    components:{
        Holder
    },
    data(){
        return{
            pros:[
                {
                    title:'phone',
                    list:[
                        '您只需一个 Apple ID 和密码，就能访问所有 Apple 服务。',
                        '在 iPhone 上使用 5G',
                        '使用 MagSafe 给 iPhone 充电',
                        '只需将新旧 iPhone 放在一起，就可以转移您的所有信息和设置',
                        '添加和查看小组件',
                        '自定主屏幕',
                        '“信息”的新功能',
                        'Siri 可以在您的任何一台 Apple 设备上协助您完成日常工作',
                        '了解 iPhone 上的快录功能、超广角摄像头和其他相机功能'
                    ]
                },
                {
                    title:'Mac',
                    list:[
                        '备份 Mac',
                        'Mac 服务和维修 ',
                        '在 Mac 上通过“启动转换助理”安装 Windows 10',
                        '查找 Mac 的机型和序列号',
                    ]
                },
                {
                    title:'iPad',
                    list:[
                        '在 iPad Pro 上设置 5G',
                        '在 FaceTime 通话中使用“人物居中”',
                        '为电池充电',
                        '在 iPad 上进行多任务处理',
                        'Apple Pencil',
                        '使用妙控键盘'
                    ]
                },
                {
                    title:'Watch',
                    list:[
                        '为家庭成员设置 Apple Watch',
                        '创建和共享表盘',
                        '更改表盘',
                        '获取适用于 Apple Watch 的 App',
                        '洗手检测',
                        '测量血氧水平',
                        '跟踪睡眠时间',
                        '保护听力',
                    ]
                }
            ]
        }
    },
    computed:{
        amount(){
            return this.pros.length
        }
    }
}
</script>
<style scoped>
h1{
    margin: .5em 0;
}
.tech_box>div{
    margin-bottom: 1em;
    box-shadow: 2px 2px 10px #eee;
    border-radius: .2em;
}   
</style>